<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
const routes = router.options.routes

function goToMine(item) {
  router.push(item.path)
}
</script>

<template>
  <img class="xhome-img" src="/favicon.ico" />
  <h1 class="zhome-title">路由列表</h1>
  <ul class="zroutes">
    <li
      class="zroutes-row"
      v-for="(item, index) in routes"
      :key="index + 'routes'"
    >
      <span @click="goToMine(item)">
        {{ (item.meta && item.meta.title) || '无页面标题' }}
      </span>
    </li>
  </ul>
</template>

<style>
.xhome-img {
  margin: 28px 28px 0 28px;
  width: 100px;
  height: 100px;
}
.zhome-title {
  padding: 28px;
  font-size: 40px;
}
.zroutes {
  padding: 0 60px;
  line-height: 60px;
  font-size: 28px;
}
.zroutes-row {
  border-bottom: 1px #efefef solid;
}
</style>
